<template>
    <view class="article_index">     
		<text class="h">
			<text :class="type==='article'?'active':''" @click="wz()">文章</text>
			<text :class="type==='video'?'active':''" @click="sp()">视频</text>
		</text>
		<view class="li" v-if="type==='article'?'active':''">
			<view v-for="article in itemList" class="list" :key="article.id">
				<h2>
				<view class="a" @click="goDetail(article.id)">{{article.title}}</view>
				</h2>
				<p class="abstract">{{article.abstract}}</p>
				<p class="author">{{ article.author }}</p>
				<p class="time">{{ article.date }}</p>
			</view>
		</view>
		<view class="li" v-else>
			<view v-for="article in itemList" class="list2" :key="article.id">
				<view class="text" @click="goDetail(article.id)">
					<h2>
						<view class="a">{{article.title}}</view>
					</h2>
					<p class="abstract">{{article.abstract}}</p>
					<p class="author">{{ article.author }}</p>
					<p class="time">{{ article.date }}</p>
				</view>
				<view class="img">
					<image :src="fm(article)"></image>
				</view>
			</view>
		</view>
    </view>
</template>
<script>
	import con from 'pages/const.js'
    export default {
        data() {
            return {  
                 itemList: [],
				 articleList: [],
				 videoList: [],
				 type: 'video'
            }
        },
        onLoad() {
			this.getList('video')
            this.getList('article')
        },
		onPullDownRefresh(){
			this.getList(this.type)
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
        methods: {
			fm(x){
				return con.server+x.fm
			},
			wz(){
				this.type='article'
				this.itemList=this.articleList
			},
			sp(){
				this.type='video'
				this.itemList=this.videoList
			},
            getList(d) {
				if(d==='video'){
				 	var url=con.request_ip+'/resource/index_video/1'
				}
				else{
					var url=con.request_ip+'/resource/index_article/1'
				}
				var t=this
                uni.request({
                    url: url,
					method:'GET',
					sslVerify:false,
                    success: (res) => {
						if(d==='video')
							t.videoList =res.data.article_list
						else
							t.articleList =res.data.article_list
						if(t.type==='video')
							t.itemList=t.videoList
						else
							t.itemList=t.articleList
                    },
					fail: (res) => {
						uni.showToast({
						    'title':'请求失败,请下拉新'
						});
					}
                });
            },
			goDetail(id){
				uni.navigateTo({
					url:'/pages/page/'+this.type+'?id='+id
				})
			}
        }
    }
</script>
<style scoped>
.article_index{
	position: relative;
	top: var(--status-bar-height);
}
.h text{
	position: relative;
	left:5%;
	width: 138rpx;
	margin: 12rpx 0 22rpx 22rpx;
}
.active{
	font-size: 54rpx;
}
.list{
	position: relative;
	padding: 32rpx 64rpx 22rpx 64rpx;
}
.list2{
	position: relative;
	padding: 32rpx 64rpx 22rpx 64rpx;
	display: flex;
}
.a{
	text-decoration: none;
	color:#00aaff;
	font-size: 40rpx;
}
.abstract{
	font-size: 36rpx;
	margin-bottom: 10rpx;
}
.author{
	color:#b1b1b1;
	font-size: 32rpx;
}
.time{
	position: relative;
	color:#b1b1b1;
	font-size: 32rpx;
}
.text{
	width: 372rpx;
}
.img{
	width:40%;
	height: 248rpx;
}
image{
	width: 100%;
	height: 100%;
}
</style>